'use client';

import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useContext } from 'use-context-selector';
import { useTranslation } from 'react-i18next';
import { RiCloseLine } from '@remixicon/react';
import AppIconPicker from '../../base/app-icon-picker';
import s from './style.module.css';
import cn from '@/utils/classnames';
import Button from '@/app/components/base/button';
import Modal from '@/app/components/base/modal';
import Confirm from '@/app/components/base/confirm';
import { ToastContext } from '@/app/components/base/toast';
import { deleteApp, switchApp } from '@/service/apps';
import { useAppContext } from '@/context/app-context';
import { useProviderContext } from '@/context/provider-context';
import AppsFull from '@/app/components/billing/apps-full-in-dialog';
import { NEED_REFRESH_APP_LIST_KEY } from '@/config';
import { getRedirection } from '@/utils/app-redirection';
import type { App } from '@/types/app';
import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback';
import AppIcon from '@/app/components/base/app-icon';
import { useStore as useAppStore } from '@/app/components/app/store';

type SwitchAppModalProps = {
  show: boolean;
  appDetail: App;
  onSuccess?: () => void;
  onClose: () => void;
  inAppDetail?: boolean;
};

const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClose }: SwitchAppModalProps) => {
  const navigate = useNavigate();
  const { t } = useTranslation();
  const { notify } = useContext(ToastContext);
  const setAppDetail = useAppStore((s) => s.setAppDetail);

  const { isCurrentWorkspaceEditor } = useAppContext();
  const { plan, enableBilling } = useProviderContext();
  const isAppsFull = enableBilling && plan.usage.buildApps >= plan.total.buildApps;

  const [showAppIconPicker, setShowAppIconPicker] = useState(false);
  const [appIcon, setAppIcon] = useState(
    appDetail.icon_type === 'image'
      ? { type: 'image' as const, url: appDetail.icon_url, fileId: appDetail.icon }
      : { type: 'emoji' as const, icon: appDetail.icon, background: appDetail.icon_background },
  );

  const [name, setName] = useState(`${appDetail.name}(copy)`);
  const [removeOriginal, setRemoveOriginal] = useState<boolean>(false);
  const [showConfirmDelete, setShowConfirmDelete] = useState(false);

  const goStart = async () => {
    try {
      const { new_app_id: newAppID } = await switchApp({
        appID: appDetail.id,
        name,
        icon_type: appIcon.type,
        icon: appIcon.type === 'emoji' ? appIcon.icon : appIcon.fileId,
        icon_background: appIcon.type === 'emoji' ? appIcon.background : undefined,
      });
      if (onSuccess) onSuccess();
      if (onClose) onClose();
      notify({ type: 'success', message: t('app.newApp.appCreated') });
      if (inAppDetail) setAppDetail();
      if (removeOriginal) await deleteApp(appDetail.id);
      localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1');
      getRedirection(
        isCurrentWorkspaceEditor,
        {
          id: newAppID,
          mode: appDetail.mode === 'completion' ? 'workflow' : 'advanced-chat',
        },
        navigate,
      );
    } catch (e) {
      notify({ type: 'error', message: t('app.newApp.appCreateFailed') });
    }
  };

  useEffect(() => {
    if (removeOriginal) setShowConfirmDelete(true);
  }, [removeOriginal]);

  return (
    <>
      <Modal className={cn('p-8 max-w-[600px] w-[600px]', s.bg)} isShow={show} onClose={() => {}}>
        <div className="absolute right-4 top-4 p-2 cursor-pointer" onClick={onClose}>
          <RiCloseLine className="w-4 h-4 text-gray-500" />
        </div>
        <div className="w-12 h-12 p-3 bg-white rounded-xl border-[0.5px] border-gray-100 shadow-xl">
          <AlertTriangle className="w-6 h-6 text-[rgb(247,144,9)]" />
        </div>
        <div className="relative mt-3 text-xl font-semibold leading-[30px] text-gray-900">{t('app.switch')}</div>
        <div className="my-1 text-gray-500 text-sm leading-5">
          <span>{t('app.switchTipStart')}</span>
          <span className="text-gray-700 font-medium">{t('app.switchTip')}</span>
          <span>{t('app.switchTipEnd')}</span>
        </div>
        <div className="pb-4">
          <div className="py-2 text-sm font-medium leading-[20px] text-gray-900">{t('app.switchLabel')}</div>
          <div className="flex items-center justify-between space-x-2">
            <AppIcon
              size="large"
              onClick={() => {
                setShowAppIconPicker(true);
              }}
              className="cursor-pointer"
              iconType={appIcon.type}
              icon={appIcon.type === 'image' ? appIcon.fileId : appIcon.icon}
              background={appIcon.type === 'image' ? undefined : appIcon.background}
              imageUrl={appIcon.type === 'image' ? appIcon.url : undefined}
            />
            <input
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder={t('app.newApp.appNamePlaceholder') || ''}
              className="grow h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs"
            />
          </div>
          {showAppIconPicker && (
            <AppIconPicker
              onSelect={(payload) => {
                setAppIcon(payload);
                setShowAppIconPicker(false);
              }}
              onClose={() => {
                setAppIcon(
                  appDetail.icon_type === 'image'
                    ? { type: 'image' as const, url: appDetail.icon_url, fileId: appDetail.icon }
                    : { type: 'emoji' as const, icon: appDetail.icon, background: appDetail.icon_background },
                );
                setShowAppIconPicker(false);
              }}
            />
          )}
        </div>
        {isAppsFull && <AppsFull loc="app-switch" />}
        <div className="pt-6 flex justify-between items-center">
          <div className="flex items-center">
            <input
              id="removeOriginal"
              type="checkbox"
              checked={removeOriginal}
              onChange={() => setRemoveOriginal(!removeOriginal)}
              className="w-4 h-4 rounded border-gray-300 text-blue-700 cursor-pointer focus:ring-blue-700"
            />
            <label htmlFor="removeOriginal" className="ml-2 text-sm leading-5 text-gray-700 cursor-pointer">
              {t('app.removeOriginal')}
            </label>
          </div>
          <div className="flex items-center">
            <Button className="mr-2" onClick={onClose}>
              {t('app.newApp.Cancel')}
            </Button>
            <Button className="border-red-700" disabled={isAppsFull || !name} variant="warning" onClick={goStart}>
              {t('app.switchStart')}
            </Button>
          </div>
        </div>
      </Modal>
      {showConfirmDelete && (
        <Confirm
          title={t('app.deleteAppConfirmTitle')}
          content={t('app.deleteAppConfirmContent')}
          isShow={showConfirmDelete}
          onConfirm={() => setShowConfirmDelete(false)}
          onCancel={() => {
            setShowConfirmDelete(false);
            setRemoveOriginal(false);
          }}
        />
      )}
    </>
  );
};

export default SwitchAppModal;
